<template>
    <div class="app-container">
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="4">
           <el-tag>提交我的实训单位信息：</el-tag> 
         </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container" align="center">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
           请输入学生的姓名：
         </el-col>
          <el-col :span="4">
          <el-input v-model="params.companyName" placeholder="请输入姓名"></el-input>
          </el-col>
          <el-col :span="2">
         </el-col>
          <el-col :span="4">
           请输入学生的学号：
         </el-col>
          <el-col :span="4">
          <el-input v-model="params.companyName" placeholder="请输入学号"></el-input>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container" align="center">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
           请输入学生的专业：
         </el-col>
          <el-col :span="4">
          <el-input v-model="params.companyName" placeholder="请输入专业"></el-input>
          </el-col>
          <el-col :span="2">
         </el-col>
          <el-col :span="4">
           请输入学生的班级：
         </el-col>
          <el-col :span="4">
          <el-input v-model="params.companyName" placeholder="请输入班级"></el-input>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container" align="center">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
           请输入指导老师姓名：
         </el-col>
          <el-col :span="4">
          <el-input v-model="params.companyName" placeholder="请输入指导老师姓名"></el-input>
          </el-col>
          <el-col :span="2">
         </el-col>
          <el-col :span="4">
           请输入指导老师电话：
         </el-col>
          <el-col :span="4">
          <el-input v-model="params.companyName" placeholder="请输入指导老师电话"></el-input>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="2">
         </el-col>
         <el-col :span="4" >
          请选择实训单位类型：
         </el-col>
          <el-col :span="12">
           <el-select v-model="params.internshipType" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>  
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
          请输入实训单位名称：
         </el-col>
          <el-col :span="12">
             <el-input v-model="params.internshipName" placeholder="请输入实训单位名称"></el-input>
          </el-col>
        </el-row>
      </div>
      <div>
         请输入实训单位详情：
       <el-row type="flex" class="app-container">
          <el-col :span="24">
        <div>
          <el-row type="flex" class="app-container" :gutter="40">
              <el-col :span="24">
                <tinymce :height="300" v-model="params.detail"></tinymce>
              </el-col>
          </el-row>
        </div>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
          请输入实训单位地址：
         </el-col>
          <el-col :span="12">
             <el-input v-model="params.address" placeholder="请输入实训单位地址"></el-input>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
          请输入推荐理由：
         </el-col>
          <el-col :span="12">
             <el-input v-model="params.introduce" placeholder="请输入推荐理由"></el-input>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="2">
         </el-col>
         <el-col :span="4">
          提交实训单位的照片:
         </el-col>
          <el-col :span="12">
             <el-upload
        :action="actionUrl"
        v-model="params.pictureUrlList"
        list-type="picture-card"
        auto-upload="false"
        limit=5
        :on-progress="uploadImag"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-exceed="onFileExceed"
        :on-success="onFileSuccess"
        >
        <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
          </el-col>
        </el-row>
      </div>
      <div>
       <el-row type="flex" class="app-container">
         <el-col :span="4">
         </el-col>
         <el-col :span="6">
         </el-col>
          <el-col :span="12">
             <el-button type="primary" @click="editCompany()">再次提交</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
import {getCompanyDetail,editCompany } from '@/api/company'
import tinymce  from '@/components/Tinymce'
export default {
  components: {
        tinymce 
    },
    //页面打开时执行的方法
  created() {
    this.params.internshipId = this.$route.query.companyId;
    this.getCompanyDetail()
  },
  data() {
    return {
       actionUrl:process.env.VUE_APP_BASE_UPLOAD,
        params:{
            internshipId:'',
            internshipName:'',
            internshipType:'',
            detail:'',
            address:'',
            introduce:'',
            pictureUrlList:[]
        },
      input: '',
      textarea: '',
      input3: '',
      select: '',
      dialogImageUrl: '',
      dialogVisible: false,
       options: [{
          value: '1',
          label: '校内合作实训单位'
        }, {
          value: '2',
          label: '校外实训单位'
        }, {
          value: '3',
          label: '其他'
        }
        ],
        value: '',
        imageUrls:[]
    }
  },
    methods: {
        //	文件列表移除文件时的钩子
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //点击文件列表中已上传的文件时调用的方法
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadImag(event, file, fileList){
        console.log(event,file, fileList);
      },
      onFileExceed(){
         this.$message({
          message: '最多上传五张照片哦！',
          type: 'warning'
        });
      },
      //文件上传成功时调用
      onFileSuccess(response, file, fileList){
          this.params.pictureUrlList.push(response.bean.url);
      },
      async getCompanyDetail(){
        let res = await getCompanyDetail(this.params)
        this.params = res.bean
      },
      async editCompany(){
        await editCompany(this.params).then(()=>{
            this.$message({
              type: 'success',
              message: '重新提交审核成功!'
            })
            this.$router.go(-1)
            }
          ).catch(err=>{
            this.$message({
              type: 'success',
              message: '重新提交审核失败!'
            })
        })
      }
    }
}
</script>